<section class="content-header">
  <h1>
    历史记录
  </h1>
  <ol class="breadcrumb">
    <li>
      <a routerLink="/">
        <i class="fa fa-dashboard"></i> 主页</a>
    </li>
    <li class="active">
      <a href="javascript:;">历史记录</a>
    </li>
  </ol>
</section>

<section class="content">
  <div class="row">
    <div class="col-md-12" *ngFor="let historyEntry of billHistory">
      <div class="box">
        <div class="box-header with-border">
          <h3 class="box-title">{{ historyEntry.date | date:"fullDate" }}</h3>
        </div>
        <div class="box-body">
          <table class="table table-bordered">
            <tbody>
              <tr>
                <th style="width: 10px">#</th>
                <th style="width:150px">消费</th>
                <th>详情</th>
                <th style="width:50px">金额</th>
                <th style="width:150px">时间</th>
              </tr>
              <tr *ngFor="let bill of historyEntry.bills;let i = index">
                <td>{{ i+1 }}</td>
                <td>{{ bill.name }}</td>
                <td>
                  {{ bill.desc }}
                </td>
                <td>{{bill.cost}}</td>
                <td>{{ bill.date | date:"HH:mm" }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="box-footer clearfix">
            <h4>总计：{{historyEntry.total}}</h4>
        </div>
      </div>
    </div>
  </div>
</section>
